<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="<%=request.getContextPath()%>/common/jquery-1.6.4.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/common/picture_preview.js"></script>
		<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/common/picture_preview.css" />
		<style type="text/css">
			.imgCss {
				width: 110px;
				height: 110px;
				background-color: #000;
				border: 1px solid #333;
			}
		</style>
		<title>图片预览插件--picture_preview.js</title>
	</head>
	<body>
		<div>这是预览指定的图：<img src="http://image.haha.mx/2011/10/20/middle/144991_a2e69c7c30ec10f3f4f2163b6b201ece_1319076660.jpg" id="preImg2" fancyId="resourcePic" class="imgCss"/><br>
		 再来一张吧：<img src="http://image.haha.mx/2011/10/20/middle/145085_068fa8bdebf90f5a7fe74d252de6f520_1319081845.jpg" id="preImg4" fancyId="anotherPic" class="imgCss"/>
		<br />
	    </div>
		<div>也可以显示任何内容，如文字：<img src="<%=request.getContextPath() %>/pic/picPreviewdemo.jpg" id="preImg3" fancyId="demoTxt" class="imgCss"/>
		<br />
	    </div>
		<div id="resourcePic" style="display:none;"><img src="http://image.haha.mx/2011/10/20/middle/144991_a2e69c7c30ec10f3f4f2163b6b201ece_1319076660.jpg" style="height: 500;width: 300px;"></div>
		<div id="anotherPic" style="display:none;"><img src="http://image.haha.mx/2011/10/20/middle/145085_068fa8bdebf90f5a7fe74d252de6f520_1319081845.jpg"></div>
		<div id="demoTxt" style="display:none;">这里是一段文字哦~~</div>
	</body>
	<script type="text/javascript">
		$(function(){
			$("img[id^='preImg']").fancyZoom( {
				scaleImg : true,
				closeOnClick : true
			});
		});
	</script>
</html>